<template>
	<view class="layout-container page-bg">

		<slot></slot>
		<uv-safe-bottom v-if="isSafeBottom"></uv-safe-bottom>

		<!-- 全局弹框 -->
		<uv-modal ref="showModal" :title="showGlobalPop.title || ''" align="center" :closeOnClickOverlay="false" :content="showGlobalPop.content || ''"
			:showCancelButton="showGlobalPop.showCancelButton" confirmColor="#18AC18"
			:cancelText="showGlobalPop.cancelText? showGlobalPop.cancelText: '取消'"
			:confirmText="showGlobalPop.confirmText? showGlobalPop.confirmText: '确认'"
			@confirm="toConfirmSubmit" @cancel="toCancel"></uv-modal>

		<LoadErr v-if="showLoadErr" @toRelaodData="toRelaodData" />
		<NoListData v-if="showNoListData" :blankText="blankText" />
		<uv-loading-page v-if="isLoading" :loading="isLoading" bgColor="trasparent" loading-mode="semicircle" loadingColor="#18AC18"></uv-loading-page>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, onBeforeUnmount, defineProps, withDefaults, defineEmits } from 'vue'
	import LoadErr from './loadErr.vue'
	import NoListData from './noListData.vue'
	import { useCommonStore } from '@/stores/common'
	const { showGlobalPop, toShowGlobalPop } = useCommonStore()
	
	const showModal:any = ref(null)
	const isLoading = ref(false)
	
	interface Props {
		isTabbar?: boolean
		showLoadErr?: boolean
		showNoListData?: boolean
		blankText?: string
		showLoading?: boolean
		isSafeBottom?: boolean
	}
	const props = withDefaults(defineProps<Props>(), {
		isTabbar : false,
		showLoadErr: false,
		showNoListData: false,
		blankText: '暂无数据',
		showLoading: false,
		isSafeBottom: true,
	})
	
	watch(() => showGlobalPop.show, (val:boolean) => {
		if(val) {
			showModal.value.open()
		}else {
			showModal.value.close()
		}
	})
	
	const timers = ref()
	watch(() => props.showLoading, (val) => {
		isLoading.value = val
		if(val) {
			timers.value = setTimeout(() => {
				isLoading.value = false
			}, 5000)
		}else {
			clearTimeout(timers.value)
		}
	})
	
	onBeforeUnmount(() => {
		showModal.value.close()
		toShowGlobalPop({ show: false })
	})
	
	const emit = defineEmits(['toRelaodData'])
	
	const toRelaodData = () => {
		emit('toRelaodData', true)
	}
	
	const toConfirmSubmit = () => {
		showModal.value.close()
		showGlobalPop.confirm && showGlobalPop.confirm()
		setTimeout(() => {
			toShowGlobalPop({ show: false })
		}, 500)
	}
	
	const toCancel = () => {
		showModal.value.close()
		setTimeout(() => {
			showGlobalPop.cancel && showGlobalPop.cancel()
			toShowGlobalPop({ show: false })
		})
	}
</script>

<style scoped lang="scss">
	.layout-container {
		width: 100%;
		min-height: 100vh;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.page-box-bg {
		position: fixed;
		top: -50vh;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background: $theme-main;
	}
</style>